<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	

	<style type="text/css">
		
		*{
			margin: 0;
			padding: 0;
		}
		li{
			width: 100px;
			height: 100px;
			background: yellow;
			margin: 0 auto;
		}

	</style>
</head>
<body>
	<div style='margin: 50px;'>
		<input id="opbtn" type="button" value="添加选项"></input>
		<input id="deltn" type="button" value="删除选项"></input>
		<ol id="opts" type="A"></ol>
		<!-- 提示语 -->
		<!-- <li></li> -->
		<span id='optips'></span>
	</div>

	<script>

		$(function(){
			// 添加
			$("#opbtn").click(function(){
				if(Number( $("#opts>li").length)<6){
					// append表示在#opts结尾插入内容
					$("#opts").append('<li><input></li>');
				}else{
					$("#optips").html("选项个数已经达到最大，不能再添加！");
					$("#optips").css("color",'red');

				}
			});

			// 删除
			$("#deltn").click(function(){
				if($("#opts>li").length<=0){
					$("#optips").html("已经没有选项可以删除！");
					$("#optips").css("color",'red');
				}else{
					// 删除选项，每次删除最后一个
					$("#optips").html("");
					$('#opts>li').last().remove();
				}
			});
		}
		)
	</script>
</body>
</html>